<template>
  <div class="w-iframe" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.04)">
    <iframe ref="iframeEl" v-if="urlPath" :src="`${urlPath}`" class="iframe"  allowtransparency="true" allowfullscreen="true"/>
    <template v-else>
      <el-empty image="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/empty.png" description="暂无数据"></el-empty>
    </template>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, onMounted, onUnmounted } from 'vue'
import { getStore } from '@/utils/store'
type Props = {
  src: string
  params?: any
  paramsObj?: any
  height?:string
}

const props = withDefaults(defineProps<Props>(),{})

let REPORT_URl =import.meta.env.MODE == 'development'?import.meta.env.VITE_REPORT_URL: window.location.origin+ '/apld-report/#'
if (window.location.host == 'mzj.nanjing.gov.cn') {
  REPORT_URl = window.location.origin+ '/nxyl/apld-report/#'
}

const iframeEl = ref()
const urlPath = ref(props.src)
const loading = ref(false)
var doit
const postMessage = () => {
  if (iframeEl.value.contentWindow) {
    iframeEl.value.contentWindow.postMessage(
      {
        type: 'NingXiangReport',
        auth: 'xx',
        queryObj: props.params,
        paramsObj: props.paramsObj,
        path: props.src,
        data: {
          access_token: getStore('access_token'),
          refresh_token: getStore('refresh_token'),
          user_info: getStore('userInfo'),
          originUrl: location.href, // 这个有用
          redirect: '/dashboard',
        },
      },
      '*'
    )
  }
}


const iframeInit = () => {
  nextTick(() => {
    const clientHeight = document.documentElement.clientHeight - 200
    if (iframeEl.value) {
      iframeEl.value.style.width = `100%`
      iframeEl.value.style.height =props.height?props.height: `${clientHeight}px`
      iframeEl.value.src = `${urlPath.value}?time=${new Date().getTime()}`
      if (iframeEl.value.attachEvent) {
        postMessage()
        loading.value = false
      } else {
        iframeEl.value.onload = () => {
          postMessage()
          loading.value = false
        }
      }
    }

  })
}

const LoadIframe = () => {
  loading.value = true
  urlPath.value = REPORT_URl + props.src // 加载地址
  iframeInit()
  window.onresize = () => {
    clearTimeout(doit);
    // doit = setTimeout(iframeInit, 1500);
  }
}

const destroyIframe = () => {
  if (loading.value) loading.value = false
  function destroyIframe() {
    //把iframe指向空白页面，这样可以释放大部分内存。
    try {
      iframeEl.value.src = 'about:blank'
      iframeEl.value.contentWindow.document.write('')
      iframeEl.value.contentWindow.document.clear()
    } catch (e) { }
    //把iframe从页面移除
    iframeEl.value.parentNode.removeChild(iframeEl.value)
  }
  if (iframeEl.value) destroyIframe()
}
onMounted(() => {
  LoadIframe()
})

onUnmounted(() => {
  destroyIframe()
})

</script>

<style scoped lang="scss">
.w-iframe {
  width: 100%;
  height: 100%;
  position: relative;
  // box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  //   100px 100px 80px rgba(0, 0, 0, 0.07);

  .iframe {
    width: 100%;
    height: 100vmin;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
}
</style>
